<!DOCTYPE html>
<html>

<head>
    <title>Job Map</title>
    <style>
        #map {
            height: 700px;
            width: 100%;
            z-index: 1;
        }

        .info-window {
            background-color: rgb(0, 169, 181);
            color: white;
            width: 200px;
            padding: 10px;
            max-height: 200px;
            overflow-y: auto;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #ffffff;
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
            position: absolute;
            z-index: 6000;
        }

        #zoomIn {
            bottom: 40px;
            right: 20px;
        }

        #zoomOut {
            bottom: 10px;
            right: 20px;
        }

        #routeOptions {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 6000;
        }

        #searchInput {
            border-color: black;
            height: 30px;
            width: 150px;
        }

        #search {
            background-color: #99FFFF;
            height: 30px;
        }

        #toggleSatellite {
            margin-top: 600px;
            background-color: gainsboro;
        }
    </style>
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=fd67aa14a5d202c197380b3f58fa8246&plugin=AMap.Driving"></script>
    <script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
    <input type="text" id="searchInput" placeholder="输入关键字搜索职位">
    <button id="search" onclick="searchJob()">搜索</button>
    <div id="map" class="map">
        <button class="btn" id="zoomIn">+</button>
        <button class="btn" id="zoomOut">-</button>
        <button class="btn" id="toggleSatellite">切换卫星地图</button>

    </div>
    <script>
        let globalData;
        let displayedJobs = 170;
        let map;
        let driving;
        //调用接口
        async function fetchData() {
            try {
                const response = await fetch('http://localhost:3000/address/list?page=17&pageSize=170', { method: 'GET', headers: { 'Content-Type': 'application/json', 'token': sessionStorage.getItem('token') } });

                if (response.ok) {
                    globalData = await response.json();
                    console.log(globalData);
                    return globalData;
                } else {
                    console.error('无效的token');
                }
            } catch (error) {
                console.error(error);
            }
        }

        //将信息展示到地图上，可以实现点击弹出窗口
        async function displayDataOnMap(data) {
            map = new AMap.Map('map', { zoom: 10, center: [106.552672, 29.564038] });

            data.rows.forEach(address => {
                const marker = new AMap.Marker({ position: [address.longitude, address.latitude], title: `${address.job} | ${address.salary} | ${address.company}` });

                marker.on('click', function (e) {
                    const content = `<div class="info-window"> 
<h3>${address.job} | ${address.salary}</h3> 
<p>${address.company}</p> 
</div>`;

                    const infoWindow = new AMap.InfoWindow({ content: content, offset: new AMap.Pixel(0, -30) });
                    infoWindow.open(map, marker.getPosition());
                });
                map.add(marker);
            });
        }
 
        //搜索职位
        async function searchJob() {
            const keyword = document.getElementById('searchInput').value;
            const data = await fetchData();
            if (data) {
                const filteredData = data.rows.filter(item => item.job.includes(keyword));
                displayedJobs = 170;
                displayDataOnMap({ rows: filteredData, total: data.total });
            }
        }
       //缩放
        document.getElementById('zoomIn').addEventListener('click', function () { map.setZoom(map.getZoom() + 1); });
        document.getElementById('zoomOut').addEventListener('click', function () { map.setZoom(map.getZoom() - 1); });

        //切换卫星地图
        document.getElementById('toggleSatellite').addEventListener('click', function () {
            const layers = map.getLayers();
            let satelliteLayer = null;
            layers.forEach(layer => {
                if (layer.CLASS_NAME === 'AMap.TileLayer.Satellite') { satelliteLayer = layer; }
            });
            if (satelliteLayer) {
                map.remove(satelliteLayer);
            } else {
                const newLayer = new AMap.TileLayer.Satellite();
                map.add(newLayer);
            }
        });

        document.addEventListener('DOMContentLoaded', async function () {
            await fetchData();
            if (globalData) {
                displayDataOnMap(globalData);
               
                AMap.plugin('AMap.Weather', function () {
                    let weather = new AMap.Weather();
                    weather.setMap(map);
                });
            }
        });

    </script>
</body>

</html>